<%@ page contentType="text/html;charset=utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page session="false"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="/resources/knit/js/jquery.js"></script>
<style>
html,body{height:100%;overflow:hidden}

div{
	position:relative;
}

#contents{
	padding-right:256px;
	height:100%
}

#rightDiv::after{
	display: block;
	clear: both;
	content: "";
}

#rightDiv{
	display: inline;
	float: right;
	position: relative;
	z-index: 10;
	width: 100%;
	height: 100%;
	margin-right: -256px;
	background: #fff;
}
#leftDiv{
	float: left;
	position: relative;
	z-index: 20;
	width: 256px;
	height:100%;
	border-right:1px solid #bbbbbb
}

#rightTop{
	height:600px;
	border-bottom:1px solid #bbbbbb
}

#rightBot{
	height:100%;
	margin-bottom:-600px;
	padding-bottom:600px;
}

.ifr {
	width:100%;
	height:100%;
	display:block;
	border:0;
}

#deemed {
	width:100%;
	height:100%;
	background-color:#000000;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
	position:absolute;
	top:0;
	left:0;
	z-index:9999
}

#alaertDiv{
	position:absolute;
}

</style>
<link rel="stylesheet" href="/resources/knit/css/knit.css">
  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
    <script src="/resources/knit/js/html5shiv.js"></script>
    <script src="/resources/knit/js/respond.min.js"></script>
  <![endif]-->
  
<script>
function setEditorStatus(a1){
	editor.setEditorStatus(a1);
}

function getEditorCount(){
	return editor.getEditorCount();
}

function getEditorText(index){
	return editor.getEditorText(index);
}

function sendAlert(a){
	alert(a);
}

function getTheme(){
	return editor.getTheme();
}

function changeTheme(a){
	editor.changeTheme(a);
}

function getRightWidth(){
	return document.getElementById('right').offsetWidth;
}

function getResultHeight(){
	return $('#rightBot').height();
}

function run(){
	editor.run();
}


function hideDeemed(){
	$('#deemed').hide();
	$('#alertDiv').hide();
}

function showDeemed(){
	$('#deemed').show();
	$('#alertDiv').show();	
}

function showAlertDiv(html, width, height){
	$('#alertDiv').html(html);
	$('#alertDiv').css('marginLeft', '-'+(width/2)+"px");
	$('#alertDiv').css('marginTop', '-'+(height/2)+"px");
	$('#alertDiv').width(width);
	$('#alertDiv').height(height);
	showDeemed();
}

function openDBPM(dbid, width, height){
	$.ajax({
		type: "GET",
		url: "/dbpm?dbid=" + dbid,
		success: function(result){
			showAlertDiv(result, width, height);
		}	 
	})
}
</script>

</head>
<div id="contents">
<div id="leftDiv">
	<iframe name="tablelist" src="/tablelist" class="ifr"></iframe>
</div>
<div id="rightDiv" >
	<div id="rightTop">
		<iframe name="editor" src="/editor" class="ifr"></iframe>
	</div>
	<div id="rightBot">
		<iframe name="result"  id="result" src="" class="ifr"></iframe>
	</div>
</div>

</div>

<div id="deemed" onclick="hideDeemed();" style="display:none">
</div>
<div id="alertDiv" style="top:50%;left:50%;display:none;position:absolute;z-index:99999999" >
</div>
<!-- 

<frameset cols="256px,*">
	<frame name="tablelist" src="/tablelist">
	<frameset id="right" rows="*,400px">
		<frame name="editor" src="editor">
		<frame name="result" src="" id="result">
	</frameset>
</frameset>
 -->
</html>